<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        body{
            overflow: auto;
            position: relative;
        }
     #cont{
         height: 12.7rem;
         display: flex;
         overflow: hidden;
         list-style: none;
         border:none;
         transition: all .3s;
         position: relative;
     }
     #cont::-webkit-scrollbar{
         display: none;
     }
     #cont li{
         height: 10.7rem;
         width: 7.5rem;
         border:none;

     }
     #cont li img{
         width: 7.5rem;
         vertical-align: top;
         /* transform: translateX("-7.5rem"); */
     }
    #point{
        width: .88rem;
        height: .13rem;
        list-style: none;
        display: flex;
        position: absolute;
        top: 11.8rem;
        left: 50%;
        transform: translateX(-50%);
    }
    #point li:nth-last-of-type(2){
        margin: 0 0.08rem;
    }
    .pLi{
        width: 0.4rem;
        height: 100%;
        background-color: #e4e4e4;
        border-radius: 0.05rem;     
        transition: all .3s   
    }
    .type{
        width: .68rem;
        background-color: #2ebdfa;
        border-radius: 0.05rem;
    }
    #start{
        font-size: .4rem;
        width: 3.24rem;
        height: .8rem;
        color: #fff;
        text-align: center;
        line-height: .8rem;
        background-color: #43c4fb;
        position: absolute;
        top: 11.5rem;
        left: 50%;
        transform: translateX(-50%);
        border-radius: .06rem ;
        z-index: 100;
        box-shadow: 0 .1rem 0 #26a6dd;
        text-decoration: none;
        display: block;
    }
    #last{
        position: relative;
        overflow: visible;
    }
    </style>
</head>
<body>
    <ul id="cont">
        <li><img src="../image/yindaoye03.png" alt="" srcset=""></li>
        <li><img src="../image/yindaoye02.png" alt="" srcset=""></li>
        <li id="last"><img src="../image/yindaoye01.png" alt="" srcset=""><a href="../首页.html" id="start">立即开启</a>
        </ul></li>
        
    <ul id="point">
        <li class="pLi"></li>
        <li class="pLi"></li>
        <li class="pLi"></li>
    </ul>
    <script src="../js/rem.js"></script>
    <script>
            var startx, starty;
            //获得角度
            function getAngle(angx, angy) {
                return Math.atan2(angy, angx) * 180 / Math.PI;
            };
            
            //根据起点终点返回方向 1向上 2向下 3向左 4向右 0未滑动
            function getDirection(startx, starty, endx, endy) {
                var angx = endx - startx;
                var angy = endy - starty;
                var result = 0;
            
                //如果滑动距离太短
                if (Math.abs(angx) < 100 && Math.abs(angy) < 100) {
                    return result=0;
                }
            
                var angle = getAngle(angx, angy);
                if (angle >= -135 && angle <= -45) {
                    result = 1;
                } else if (angle > 45 && angle < 135) {
                    result = 2;
                   }
              else if ((angle >= 135 && angle <= 180) || (angle >= -180 && angle < -135)) {
                 result = 3;
             } else if (angle >= -45 && angle <= 45) {
                 result = 4;
             }
            
                return result;
            }
            //手指接触屏幕
            document.addEventListener("touchstart", function(e){
                startx = e.touches[0].pageX;
                starty = e.touches[0].pageY;
            }, false);
            //手指在屏幕上滑动
            document.addEventListener("touchmove",function(e){
                // console.log(e.touches[0].pageX);
                // console.log(e.touches[0].pageY);
                startxm = e.touches[0].pageX;
                console.log(startxm-startx);
                let contML2 = document.querySelector("#cont");
                contML2.style.marginLeft = (marginL+(startxm-startx)*2/100)+"rem";
            })
            //手指离开屏幕
            var  marginL = 0;
            document.addEventListener("touchend", function(e) {
                var endx, endy;
                endx = e.changedTouches[0].pageX;
                endy = e.changedTouches[0].pageY;
                // var  marginL = 0;
                var direction = getDirection(startx, starty, endx, endy);
                switch (direction) {
                    case 0:
                        // alert("未滑动！");
                        
                        
                        break;

                    // case 1:
                    //     alert("向上！");
                    //     break;
                    // case 2:
                    //     alert("向下！");
                    //     break;
                    case 3:
                        // alert("向左！");
                        console.log(marginL);                     

                        marginL-=7.5;
                        // console.log(marginL);  
                        if(marginL<=-15){
                            marginL=-15
                        }
                        let cont = document.querySelector("#cont");
                        cont.style.marginLeft = marginL+"rem";
                        break;
                    case 4: 
                    console.log(marginL); 
                        console.log(marginL); 
                        if(marginL >=0){
                            marginL = 0;
                        }else{             
                        marginL+=7.5;
                        }
                        let cont1 = document.querySelector("#cont");
                        cont1.style.marginLeft = marginL+"rem";
                        break;
                    default:
                }
                pointChange();
            }, false);
            
            pointChange();
            // 进度点的变化
            function pointChange(){
            let contML = document.querySelector("#cont");
            let pointLi = document.querySelectorAll("#point li");
            pointLi[0].classList.add("type");
            contML = contML.style.marginLeft;
            switch (parseInt(contML)){
                case 0:
                for(let i = 0 ; i < pointLi.length ; i++){
                    pointLi[i].classList.remove("type");
                }
                pointLi[0].classList.add("type");
                break;
                case -7:
                for(let i = 0 ; i < pointLi.length ; i++){
                    pointLi[i].classList.remove("type");
                }
                pointLi[1].classList.add("type");
                break;
                case -15:
                for(let i = 0 ; i < pointLi.length ; i++){
                    pointLi[i].classList.remove("type");
                }
                pointLi[2].classList.add("type");
                break;
            }
            }  
            let start = document.querySelector("#start");
            // start. touchstart= function(){
            //      start.style.top="11.6rem";
            //      start.style.boxShadow = "none";
            //     //  start.onmouseup = function(){
            //     //      start.onmousedown() = null;
            //     //  }
            // }         
            start.addEventListener('touchstart',function(e){
                start.style.top="11.6rem";
                start.style.boxShadow = "none";
                start.addEventListener('touchend',function(e){
                    start.style.top="11.5rem";
                    start.style.boxShadow = "0 .1rem 0 #26a6dd";
                })
            })
            
    </script>
</body>
</html>